<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader showTitle="我的" showBackground="#EAECEF"></myheader>
		<!-- #endif -->
		<view class="content">
			<view class="card">
				<image v-if="photo==null||photo==''"  src="../../static/default-head.svg" mode="scaleToFill"
					style="height: 66px;width:66px;margin-right: 20px;" />
				<image v-else :src="photo" mode="scaleToFill"
					style="height: 66px;width:66px;margin-right: 20px;border-radius: 50%;" />
				<view style="display: flex;flex-direction:column;justify-content: space-around;">
					<view
						style="color: #2E4964;font-size:20px;font-weight: bolder; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 220px;">
						{{nickname}}
					</view>
					<view style="color:#1ABC9C;font-weight: 400;font-size: 14px;height:60rpx">
						<view>
							<span @click="selectImage()">新头像</span>
							<!-- 							<button open-type="chooseAvatar" @chooseavatar="onChooseavatar" :plain="true"
								style="color:#1ABC9C;font-weight: 400;font-size: 14px;display:inline;border:none;background-color: white;margin: 0px;padding: 0px;">新头像</button> -->
							<span style="padding: 0rpx 10rpx 0rpx 10rpx;color:#EAECEF">|</span>
							<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :plain="true"
								style="color:#1ABC9C;font-weight: 400;font-size: 14px;display:inline;border:none;background-color: white;margin: 0px;padding: 0px;">修改手机号码</button>
							<span style="padding: 0rpx 10rpx 0rpx 10rpx;color:#EAECEF">|</span>
							<span @click="showUpdateNickName()">修改昵称</span>
						</view>
					</view>
				</view>
			</view>
			<view class="card2" @click="goUrl('/pages/my/physiqueArchives')">
				<image src="../../static/my/titai.svg" mode="scaleToFill"
					style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
				<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">体态档案</view>
				<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
					<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">可基于档案提供精准服务</view>
					<view style="padding-top: 3rpx;">
						<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card2" @click="goUrl('/pages/my/groupList')">
				<image src="../../static/my/qunzu.svg" mode="scaleToFill"
					style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
				<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">群组</view>
				<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
					<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">基于群组成员已订阅提供服务</view>
					<view style="padding-top: 3rpx;">
						<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
					</view>
				</view>
			</view>

			<view class="card4">
				<view class="card2 border-top" @tap="goUrl('/pages/foodHobby/foodHobby')">
					<image src="../../static/jidong.svg" mode="scaleToFill"
						style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
					<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">食物喜好</view>
					<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
						<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">喜欢/不喜欢的食物</view>
						<view style="padding-top: 3rpx;">
							<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
						</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="card2 border-bottom" @tap="goUrl('/pages/collection/collection')">
					<image src="../../static/yishoucang.svg" mode="scaleToFill"
						style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
					<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">收藏</view>
					<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
						<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">订阅服务/商品收藏</view>
						<view style="padding-top: 3rpx;">
							<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="card4">
				<view class="card2 border-top" @tap="goUrl('/pages/feedback/feedback')">
					<image src="../../static/jianyi.svg" mode="scaleToFill"
						style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
					<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">建议反馈</view>
					<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
						<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">欢迎交流</view>
						<view style="padding-top: 3rpx;">
							<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
						</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="card2" style="margin: 0;
    border-radius: 0;
    position: relative;" @tap="goUrl('/pages/contact/contact')">
					<image src="../../static/contact.svg" mode="scaleToFill"
						style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
					<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">商务合作</view>
					<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
						<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">合作咨询</view>
						<view style="padding-top: 3rpx;">
							<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
						</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="card2 border-bottom" @tap="goUrl('/pages/about/about')">
					<image src="../../static/logo.svg" mode="scaleToFill"
						style="height:48rpx;width: 48rpx;margin-right: 10rpx;color: red;margin-right: 46rpx;" />
					<view style="color: #34495E;font-size: 32rpx;font-weight: 700;">关于</view>
					<view style="flex-grow:1;display: flex;align-items: center;justify-content: flex-end;">
						<view style="font-size: 28rpx;color:#BDC3C7;margin-right: 10rpx;">版本号V1.0.8</view>
						<view style="padding-top: 3rpx;">
							<uni-icons type="forward" size="28rpx" color="#ABB6C1"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="card5">
				<view @click="logOut()">退出登录</view>
			</view>
			<view class="card6">
				<view @click="logOut()">退出登录</view>
			</view> -->
			<view class="card3">
				<view @click="logOut()">退出登录</view>
			</view>
		</view>
		<uni-popup ref="nickNameInputDialog" type="dialog">
			<view style="background-color: white;padding: 10px;width: 260px;border-radius: 10px;margin-top: -80px;">
				<view style="text-align: center;color:black">修改昵称</view>

				<view style="text-align: center;margin-top: 15px;">
					<input type='nickname' name='nickname' :value="inputNickName" placeholder="请输入昵称"
						@input="nickNameInput" @blur="nickNameBlur" />
				</view>
				<view
					style="margin-top: 10px;padding: 15px;border-top: 1px solid #F4F6F7;display: flex;justify-content: center;">
					<view style="display: inline-block;width: 49%;text-align: center;border-right: 1px solid #EFEFEF;color:#1ABC9C"
						@click="nickNameConfirm()">确认</view>
					<view style="display: inline-block;width: 49%;text-align: center;color:#E74C3C" @click="cancelNickName()">取消
					</view>
				</view>
			</view>
		</uni-popup>
		<ksp-cropper mode="free" :maxWidth="320" :maxHeight="320" :url="selectPictureUrl" @cancel="oncancel"
			@ok="onok"></ksp-cropper>
		<mytabbar :active="3" :count="0"></mytabbar>
	</view>
</template>

<script>
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	import config from '../../utils/config.js';
	export default {
		components: {
			mytabbar,
			myheader,
		},
		data() {
			return {
				selectPictureUrl: "",
				path: "",
				inputNickName: "",
			}
		},
		onShareAppMessage(res) {
		
		return {
			title: '好友分享了吃巧【吃巧Ai营养师】',
			path: '/pages/index/index',
			imageUrl: "https://www.chideqiao.com/api/images/myhm-static/share_1.png"

		};
},
		computed: {
			nickname() {
				return this.$store.state.nickname;
			},
			photo() {
				if(typeof this.$store.state.photo=='object'){
					return "";
				}
				if(this.$store.state.photo=='[object Object]'){
					return "";
				}
				return this.$store.state.photo;
			}
		},
		mounted(){
		},
		methods: {
			selectImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.selectPictureUrl = res.tempFilePaths[0];
					}
				});
			},
			onok(e) {
				this.selectPictureUrl = "";
				let filePath = e.path;
				let url = config.domainToB + 'manage/generic/pic/upload';
				let _this = this;
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				uni.uploadFile({
					header: {
						"token": _this.$store.state.token
					},
					name: "file",
					filePath: filePath,
					url: url, // 服务器接口地址
					success(res) {
						let resData = JSON.parse(res.data);
						if (resData.code == 0) {
							let photo = resData.data;
							let data = {
								"photo": photo
							}
							_this.$H.post("portal/user/edit", data).then((res2) => {
								uni.hideLoading();
								if (res2.code == 0) {
									_this.$store.commit('setPhoto', photo);
									uni.showToast({
										title: "上传成功",
										icon: "none"
									});
								} else {
									uni.showToast({
										title: "上传失败",
										icon: "none"
									});
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: "上传失败",
								icon: "none"
							});
						}
					},
					fail(err) {
						uni.hideLoading(); // 隐藏加载提示
						uni.showToast({
							title: "上传失败",
							icon: "none"
						});
					}
				})
			},
			oncancel() {
				this.selectPictureUrl = "";
			},
			getPhoneNumber(e) {
				if (e.detail != null) {
					if (e.detail.code != null) {
						this.$H.get("portal/user/miniAppBindPhone", {
							code: e.detail.code
						}).then((res) => {
							uni.hideLoading();
							if (res.code == 0) {
								uni.showToast({
									title: "修改成功",
									icon: "none"
								})
							}
						});
					}
				}
			},
			nickNameBlur(e) {
				this.inputNickName = e.detail.value;
			},
			nickNameInput(e) {
				this.inputNickName = e.detail.value;
			},
			nickNameConfirm() {
				if (this.inputNickName == this.$store.state.nickname) {
					return;
				}
				if (this.inputNickName.length == 0) {
					uni.showToast({
						title: "请正确填写昵称",
						icon: "none"
					})
					return;
				}
				if (this.inputNickName.length > 15) {
					uni.showToast({
						title: "昵称长度不能大于15个字",
						icon: "none"
					})
					return;
				}
				uni.showLoading({
					title: '正在修改中...',
					mask: true
				});
				let data = {
					"nickname": this.inputNickName
				}
				this.$H.post("portal/user/edit", data).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						this.$H.get("portal/user/info").then(res => {
							if (res.code == 0) {
								this.$store.commit('setNickname', res.data.nickname);
								this.$store.commit('setUid', res.data.userId);
							}
						});
						this.$refs.nickNameInputDialog.close();
						this.inputNickName = "";
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			cancelNickName() {
				this.$refs.nickNameInputDialog.close();
				this.inputNickName = "";
			},
			showUpdateNickName() {
				this.inputNickName = this.$store.state.nickname;
				this.$refs.nickNameInputDialog.open();
			},
			goUrl(page) {
				console.log(page, 'page-----')
				uni.navigateTo({
					url: page
				})
			},
			logOut() {
				uni.showLoading({
					title: '正在退出...',
					mask: true
				});
				this.$store.commit('logout');
				uni.hideLoading();
				uni.switchTab({
					url: '/pages/find/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.content {
		padding: 0rpx 20rpx 300rpx 20rpx;
	}

	.card {
		border-radius: 10px;
		height: 132rpx;
		background-color: white;
		padding: 20rpx 30rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.card2 {
		border-radius: 10px;
		background-color: white;
		margin-top: 24rpx;
		padding: 20rpx 30rpx 20rpx 42rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.card3 {
		border-radius: 10px;
		background-color: white;
		margin-top: 24rpx;
		padding: 20rpx 30rpx 20rpx 42rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #E74C3C;
		font-size: 32rpx;
		font-weight: 700;
	}
	.card5 {}
	.card6 {}

	.card4 {
		margin-top: 24rpx;
		border-radius: 20rpx;
	}

	.border-top {
		margin: 0;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.border-bottom {
		margin: 0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.line {
		width: calc(100% - 120rpx);
		height: 1px;
		background: #EAECEF;
		position: absolute;
		right: 0;
		bottom: 0
	}
</style>